<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title>姓氏</title>
	</head>
	<body>
		<input id="name" /><button id="conv">转换</button>
	</body>
	<script type="text/javascript">
		// 定义姓氏数组
		var fname = ['张','李','王','诸葛','欧阳','西门','司马','爱新觉罗'];

		
		// 为转换按钮增加点击事件
		document.getElementById("conv").onclick=function(){
			// 获取输入框中的姓名
			let name = document.getElementById("name").value;
			// 转换
			// name.substring(0,1); // 此种方式只能截取一个字，复姓将会失败
			// 匹配姓氏
			for(let i=0;i<fname.length;i++){
				// 获取某一个姓氏
				let fn = fname[i];
				
				/*
					startsWith 方案
					
					// 判断用户名是否为当前姓氏
					let fnExists = name.startsWith(fn);
					// 用户名称是当前姓氏
					if(fnExists){
						alert(`${fn}**`);
						// 找到姓氏后，就没有循环下去的必要
						break;
					}
				*/
				// 判断用户名是否为当前姓氏
				let fnExists = name.indexOf(fn);
				// 用户名称是当前姓氏
				if(fnExists != -1){
					alert(`${fn}**`);
					// 找到姓氏后，就没有循环下去的必要
					break;
				}
			}
		}

	</script>
</html>
